<!-- footer start (Add "light" class to #footer in order to enable light footer) -->
<!-- ================ -->
<footer id="footer" class="light">
    <!-- .subfooter start -->
    <!-- ================ -->
    <div class="subfooter">
        <div class="container">
            <div class="row">
                <div class="col-md-5">
                    <p><?=$cfg['site_copyright']?></p>
                </div>
                <div class="col-md-7">
                    <nav class="navbar navbar-default" role="navigation">
                        <!-- Toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-2">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>
                        <div class="collapse navbar-collapse" id="navbar-collapse-2">
                            <ul class="nav navbar-nav">
                                <?php foreach ($menu as $k => $v) {?>
                                    <li><a href="<?php if ($v['alias'] == 'Chinese') { echo 'http://www.10c9m.com';} else {echo site_url($v['alias']);}?>"><?=$v['catename']?></a></li>
                                <?php }?>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <!-- .subfooter end -->

</footer>
<!-- footer end -->
<style>
    /*悬浮链接*/
    .suspension{position:fixed;z-index:55;right:0;bottom:150px;width:70px;height:240px;z-index:99999}
    .suspension-box{position:relative;float:right;}
    .suspension .a{display:block;width:44px;height:44px;background-color:#353535;margin-bottom:4px;cursor:pointer;outline:none;}
    .suspension .a.active,
    .suspension .a:hover{background:#009798;}
    .suspension .a .i{float:left;width:44px;height:44px;background-image:url('<?=base_url($cfg['tpl'])?>/images/kefu/side_icon.png');background-repeat:no-repeat;}
    /* .suspension .a-service .i{background-position:0 0;} */
    .suspension .a-service .i{width:20px;height:20px;margin-top:12px;margin-left:12px;background-image:url('<?=base_url($cfg['tpl'])?>/images/kefu/suspension-bg.png');background-repeat:no-repeat;background-position:0 0;}
    .suspension .a-service-phone .i{width:20px;height:20px;margin-top:12px;margin-left:12px;background-image:url('<?=base_url($cfg['tpl'])?>/images/kefu/suspension-bg.png');background-repeat:no-repeat;background-position:-27px 0;}
    .suspension .a-form .i{width:20px;height:20px;margin-top:12px;margin-left:12px;background-image:url('<?=base_url($cfg['tpl'])?>/images/kefu/form.png');background-repeat:no-repeat;background-size: 100% 100%}
    .suspension .a-qrcode .i{background-position:-44px 0;}
    .suspension .a-cart .i{background-position:-88px 0;}
    .suspension .a-top .i{background-position:-132px 0;}
    .suspension .a-top{background:#D2D3D6;display:none;}
    .suspension .a-top:hover{background:#c0c1c3;}
    .suspension .d{display:none;width:223px;background:#fff;position:absolute;right:67px;min-height:90px;border:1px solid #E0E1E5;border-radius:3px;box-shadow:0px 2px 5px 0px rgba(161, 163, 175, 0.11);}
    .suspension .d .arrow{position:absolute;width:8px;height:12px;background:url('<?=base_url($cfg['tpl'])?>/images/kefu/side_bg_arrow.png') no-repeat;right:-8px;top:31px;}
    .suspension .d-service{top:0;}
    .suspension .d-service-phone{top:34px;}
    .suspension .d-qrcode{top:78px;}
    .suspension .d .inner-box{padding:8px 22px 12px;}
    .suspension .d-service-item{border-bottom:1px solid #eee;padding:14px 0;}
    .suspension .d-service .d-service-item{border-bottom:none;}
    .suspension .d-service-item .circle{width:44px;height:44px;border-radius:50%;overflow:hidden;background:#F1F1F3;display:block;float:left;}
    .suspension .d-service-item .i-qq{width:44px;height:44px;background:url('<?=base_url($cfg['tpl'])?>/images/kefu/side_con_icon03.png') no-repeat center 15px;display:block;transition:all .2s;border-radius:50%;overflow:hidden;}
    .suspension .d-service-item:hover .i-qq{background-position:center 3px;}
    .suspension .d-service-item .i-tel{width:44px;height:44px;background:url('<?=base_url($cfg['tpl'])?>/images/kefu/side_con_icon02.png') no-repeat center center;display:block;}
    .suspension .d-service-item h3{float:left;width:112px;font-size:15px;margin-left:12px;}
    .suspension .d-service-item .text{float:left;width:112px;line-height:22px;font-size:15px;margin-left:12px;}
    .suspension .d-service-item .text .number{font-family:Arial,"Microsoft Yahei","HanHei SC",PingHei,"PingFang SC","Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;}
    .suspension .d-service-intro{padding-top:10px;}
    .suspension .d-service-intro p{float:left;line-height:27px;font-size:12px;width:50%;white-space:nowrap;color:#888;}
    .suspension .d-service-intro i{background:url('<?=base_url($cfg['tpl'])?>/images/kefu/side_con_icon01.png') no-repeat center center;height:27px;width:14px;margin-right:5px;vertical-align:top;display:inline-block;}
    .suspension .d-qrcode{text-align:center;}
    .suspension .d-qrcode .inner-box{padding:20px 0;}
    .suspension .d-qrcode p{font-size:16px;color:#93959c;}
    .suspension .d-form{width: 300px;top: 150px}
    .jiameng div{margin-bottom: 5px}
</style>
<div class="suspension">
    <div class="suspension-box">
        <a href="#" class="a a-service "><i class="i"></i></a>
        <a href="javascript:;" class="a a-service-phone "><i class="i"></i></a>
        <a href="javascript:;" class="a a-qrcode"><i class="i"></i></a>
        <a href="javascript:;" class="a a-form"><i class="i"></i></a>
        <div class="d d-service">
            <i class="arrow"></i>
            <div class="inner-box">
                <div class="d-service-item clearfix">
                    <a href="javascript:chatQQ()" class="clearfix"><span class="circle"><i class="i-qq"></i></span><h3>QQ:<?=$cfg['qq']?></h3></a>
                </div>
            </div>
        </div>
        <div class="d d-service-phone">
            <i class="arrow"></i>
            <div class="inner-box">
                <div class="d-service-item clearfix">
                    <span class="circle"><i class="i-tel"></i></span>
                    <div class="text">
                        <p>Service hotline</p>
                        <p class="red number"><?=$cfg['tel']?></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="d d-qrcode">
            <i class="arrow"></i>
            <div class="inner-box">
                <div class="qrcode-img"><img src="<?=base_url($cfg['imgthumb2'])?>"></div>
                <p>WeChat</p>
            </div>
        </div>
        <div class="d d-form">
            <i class="arrow"></i>
            <div class="inner-box">
                <div class="d-service-item clearfix" style="text-align: center;background: #4C4C48;color: white">Join Message</div>
                <div class="jiameng">
                    <form class="message_form" action="http://admin.tea.com/Client/message" method="post">
                        <div>
                            name：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="name" style="width: 65%" placeholder=" Your Name" required>
                        </div>
                        <div>
                            phone：&nbsp;&nbsp;&nbsp;&nbsp;<input type="number" name="phone" style="width: 65%" placeholder=" Your Phone" required>
                        </div>
                        <div>message：<textarea name="content_message" class="content_message" style="width: 65%" placeholder="Your Message" required></textarea></div>
                        <div style="text-align: center"><input type="button" class="join_message" value="Submit" style="padding: 0 20px"></div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- footer end -->
<!-- JavaScript files placed at the end of the document so the pages load faster
================================================== -->
<!-- Jquery and Bootstap core js files -->
<script type="text/javascript" src="<?php echo base_url($cfg['tpl'].'plugins/jquery.min.js')?>"></script>
<script type="text/javascript" src="<?php echo base_url($cfg['tpl'].'bootstrap/js/bootstrap.min.js')?>"></script>

<!-- Modernizr javascript -->
<script type="text/javascript" src="<?php echo base_url($cfg['tpl'].'plugins/modernizr.js')?>"></script>

<!-- jQuery REVOLUTION Slider  -->
<script type="text/javascript" src="<?php echo base_url($cfg['tpl'].'plugins/rs-plugin/js/jquery.themepunch.tools.min.js')?>"></script>
<script type="text/javascript" src="<?php echo base_url($cfg['tpl'].'plugins/rs-plugin/js/jquery.themepunch.revolution.min.js')?>"></script>

<!-- Isotope javascript -->
<script type="text/javascript" src="<?php echo base_url($cfg['tpl'].'plugins/isotope/isotope.pkgd.min.js')?>"></script>

<!-- Owl carousel javascript -->
<script type="text/javascript" src="<?php echo base_url($cfg['tpl'].'plugins/owl-carousel/owl.carousel.js')?>"></script>

<!-- Magnific Popup javascript -->
<script type="text/javascript" src="<?php echo base_url($cfg['tpl'].'plugins/magnific-popup/jquery.magnific-popup.min.js')?>"></script>

<!-- Appear javascript -->
<script type="text/javascript" src="<?php echo base_url($cfg['tpl'].'plugins/jquery.appear.js')?>"></script>

<!-- Count To javascript -->
<script type="text/javascript" src="<?php echo base_url($cfg['tpl'].'plugins/jquery.countTo.js')?>"></script>

<!-- Parallax javascript -->
<script src="<?php echo base_url($cfg['tpl'].'plugins/jquery.parallax-1.1.3.js')?>"></script>

<!-- Contact form -->
<script src="<?php echo base_url($cfg['tpl'].'plugins/jquery.validate.js')?>"></script>

<!-- Initialization of Plugins -->
<script type="text/javascript" src="<?php echo base_url($cfg['tpl'].'js/template.js')?>"></script>
<script type="text/javascript" src="<?php echo base_url($cfg['tpl'].'js/jquery.form.js')?>"></script>

<!-- Custom Scripts -->
<script type="text/javascript" src="<?php echo base_url($cfg['tpl'].'js/custom.js')?>"></script>
<script type="text/javascript" src="<?php echo base_url($cfg['tpl'].'js/layer.js')?>"></script>
<script>

    $('.join_message').on('click', function () {

        var name = $('input[name="name"]').val();

        if(name == ''){
            layer.alert('姓名不能为空', {icon: 5});
            return false;
        }
        var phone = $('input[name="phone"]').val();

        if(phone == ''){
            layer.alert('电话不能为空', {icon: 5});
            return false;
        }
        var content = $('.content_message').val();

        if(content == ''){
            layer.alert('留言内容不能为空', {icon: 5});
            return false;
        }

        $.ajax({
            method: 'POST',
            dataType: 'json',
            url: 'http://admin.10c9m.com/JoinMessage/message?name='+name+'&phone='+phone+'&conten='+content,
            processData: false,   // jQuery不要去处理发送的数据
            contentType: false,
            success: function(data) {
                if(data.status == 1){
                    layer.alert('留言成功', {icon: 6});
                    $('.message_form').resetForm();
                }else{
                    layer.alert('留言失败，请重试', {icon: 5});
                }
            }
        });
    })
</script>